<template>
<div class="contact-container">
    <header-component />
    <div class="contact-content">
        <div class="contact-header">
            <h1>联系我们</h1>
            <div class="divider"></div>
        </div>

        <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card class="contact-card">
                    <div class="contact-info">
                        <h2>联系方式</h2>
                        <ul class="contact-list">
                            <li>
                                <i class="el-icon-location"></i>
                                <div>
                                    <h3>地址</h3>
                                    <p>北京市朝阳区科技园区88号BFX大厦</p>
                                </div>
                            </li>
                            <li>
                                <i class="el-icon-phone"></i>
                                <div>
                                    <h3>联系电话</h3>
                                    <p>400-888-8888</p>
                                </div>
                            </li>
                            <li>
                                <i class="el-icon-message"></i>
                                <div>
                                    <h3>电子邮箱</h3>
                                    <p>contact@bfxnav.com</p>
                                </div>
                            </li>
                            <li>
                                <i class="el-icon-time"></i>
                                <div>
                                    <h3>工作时间</h3>
                                    <p>周一至周五 9:00-18:00</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card class="contact-card">
                    <div class="contact-form">
                        <h2>留言反馈</h2>
                        <el-form :model="form" :rules="rules" ref="form" label-width="80px"
                            class="contact-form-content">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="form.name" placeholder="请输入您的姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="form.email" placeholder="请输入您的邮箱"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="form.phone" placeholder="请输入您的联系电话"></el-input>
                            </el-form-item>
                            <el-form-item label="留言内容" prop="message">
                                <el-input type="textarea" v-model="form.message" :rows="4"
                                    placeholder="请输入您的留言内容"></el-input>
                            </el-form-item>
                            <el-form-item class="form-buttons">
                                <el-button type="primary" @click="submitForm('form')">提交留言</el-button>
                                <el-button @click="resetForm('form')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <footer-component />
    <back-to-top :visibilityHeight="100" />
</div>
</template>

<script>
import HeaderComponent from '@/components/Header.vue'
import FooterComponent from '@/components/Footer.vue'
import BackToTop from '@/components/BackToTop.vue'

export default {
    name: 'ContactPage',
    components: {
        HeaderComponent,
        FooterComponent,
        BackToTop
    },
    data() {
        return {
            form: {
                name: '',
                email: '',
                phone: '',
                message: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                message: [
                    { required: true, message: '请输入留言内容', trigger: 'blur' },
                    { min: 5, max: 500, message: '长度在 5 到 500 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message({
                        message: '留言提交成功，我们会尽快与您联系！',
                        type: 'success'
                    })
                    this.resetForm(formName)
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>

<style scoped>
.contact-container {
    min-height: 100vh;
    background-color: #f5f7fa;
    display: flex;
    flex-direction: column;
    /* 为固定Header留出空间 */
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    flex: 1;
    width: 100%;
    /* 确保内容占满容器宽度 */
    box-sizing: border-box;
    /* 确保padding不会增加宽度 */
}

.contact-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-header h1 {
    font-size: 28px;
    color: #303133;
    margin-bottom: 15px;
}

.divider {
    height: 3px;
    width: 60px;
    background-color: #409EFF;
    margin: 0 auto;
}

.contact-card {
    margin-bottom: 30px;
    border-radius: 8px;
    height: 100%;
}

.contact-info h2,
.contact-form h2 {
    font-size: 20px;
    color: #303133;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
}

.contact-list {
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-list i {
    font-size: 24px;
    color: #409EFF;
    margin-right: 15px;
    margin-top: 5px;
}

.contact-list h3 {
    font-size: 16px;
    color: #303133;
    margin: 0 0 5px 0;
}

.contact-list p {
    font-size: 14px;
    color: #606266;
    margin: 0;
}

.form-buttons {
    display: flex;
    justify-content: flex-start;
}

.form-buttons .el-button {
    margin-right: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .contact-content {
        padding: 20px 15px;
    }

    .contact-card {
        margin-bottom: 20px;
    }

    .contact-header h1 {
        font-size: 24px;
    }

    .contact-info h2,
    .contact-form h2 {
        font-size: 18px;
    }

    .contact-list i {
        font-size: 20px;
    }

    .contact-list h3 {
        font-size: 15px;
    }

    .contact-list p {
        font-size: 13px;
    }

    /* 移动端表单样式调整 */
    .contact-form-content /deep/ .el-form-item__label {
        text-align: left;
        float: none;
        display: block;
        padding: 0 0 10px 0;
    }

    .contact-form-content /deep/ .el-form-item__content {
        margin-left: 0 !important;
    }

    .contact-form-content /deep/ .el-form-item {
        display: flex;
        flex-direction: column;
    }

    .form-buttons {
        justify-content: center;
    }

    .form-buttons .el-button {
        margin: 0 5px;
        width: 45%;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .contact-content {
        padding: 15px 12px;
    }

    .contact-header h1 {
        font-size: 22px;
    }

    .contact-info h2,
    .contact-form h2 {
        font-size: 16px;
    }

    .contact-list i {
        font-size: 18px;
    }

    .form-buttons {
        flex-direction: column;
        align-items: center;
    }

    .form-buttons .el-button {
        margin: 5px 0;
        width: 80%;
    }
}
</style>